<template>
    <Modal
        width="520px"
        :value="value"
        @input="handleInput"
        :footer-hide="true"
        title="修改密码"
        @on-visible-change="handleChange"
        :mask-closable="false"
    >
        <div style="padding-right: 25px;">
            <Form :label-width="120" :model="form" :rules="rules" ref="form">
                <FormItem prop="oldPwd" label="当前密码">
                    <Input size="large" type="password" v-model="form.oldPwd" placeholder="请输入当前密码"></Input>
                </FormItem>
                <FormItem prop="password" label="新密码">
                    <Input size="large" type="password" autocomplete="new-password" v-model="form.password" placeholder="请输入新密码"></Input>
                </FormItem>
                <FormItem prop="password2" label="确认新密码">
                    <Input size="large" type="password" v-model="form.password2" placeholder="请确认新密码"></Input>
                </FormItem>
                <FormItem>
                    <Button long type="primary" @click="submit" :loading="sbLoading">确认</Button>
                </FormItem>
            </Form>
        </div>
    </Modal>
</template>
<script>
import { validatePassword } from '@/libs/validate'
import { modifyPassword } from '@/api/user'

export default {
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data () {
        const userInfo = JSON.parse(localStorage.getItem('userinfo')) || {}
        const userTel = userInfo.userTel || '***********'

        return {
            userTel,
            sbLoading: false,
            needValid: false, // 是否需要验证码
            timing: 0, // 短信倒计时
            delay: 3,
            form: {
                oldPwd: '',
                password: '',
                password2: ''
            },
            rules: {
                oldPwd: [
                    { required: true, message: '请输入当前密码', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请填写登录密码', trigger: 'blur,change' },
                    { min: 8, max: 15, message: '密码只能在 8~15 位之间', trigger: 'blur,change' },
                    {
                        validator: (rule, value, callback) => {
                            if (validatePassword(value)) {
                                callback()
                            } else {
                                callback('密码至少包含大小写英文字母、数字、或特殊符号当中的两种')
                            }
                        },
                        trigger: 'blur,change'
                    }
                ],
                password2: [
                    { required: true, message: '请再次填写登录密码', trigger: 'blur,change' },
                    { min: 8, max: 15, message: '密码只能在 8~15 位之间', trigger: 'blur,change' },
                    {
                        validator: (rule, value, callback) => {
                            if (value !== this.form.password) {
                                callback('两次输入的密码不一致')
                            } else {
                                callback()
                            }
                        },
                        trigger: 'change'
                    }
                ]
            }
        }
    },
    methods: {
        // 提交修改
        submit () {
            this.$refs.form.validate(v => {
                if (v) {
                    this.sbLoading = true
                    modifyPassword(this.form).then(res => {
                        if (res.data.code === '0000') {
                            this.needValid = false
                            this.handleInput(false)
                            this.modifySuccess()
                        } else {
                            this.$Message.warning(res.data.data || '修改密码失败')
                        }
                        this.sbLoading = false
                    }).catch(err => {
                        this.sbLoading = false
                        this.$Message.error('发送请求失败')
                    })
                }
            })
        },
        // 修改成功
        modifySuccess () {
            this.delayClose(_ => {
                this.$Modal.remove()
            })
            this.$Modal.success({
                title: '修改密码',
                okText: '关闭',
                render: (h) => {
                    return h('div', [
                        h('div', `密码修改成功。下次登录系统时，请使用新密码。`),
                        h('div', `${this.delay} 秒后自动关闭当前弹窗`)
                    ])
                },
                onOk: () => {
                    this.delayTimer && clearInterval(this.delayTimer)
                }
            })
        },
        // 延迟关闭
        delayClose (cb) {
            this.delay = 3
            this.delayTimer && clearInterval(this.delayTimer)
            this.delayTimer = setInterval(_ => {
                this.delay--
                if (this.delay === 0) {
                    clearInterval(this.delayTimer)
                    cb && cb()
                }
            }, 1000)
        },
        handleInput (v) {
            this.$emit('input', v)
        },
        // 显示状态改变
        handleChange (v) {
            if (v) {
                this.$refs.form.resetFields()
            } else {
                this.slideTimer && clearTimeout(this.slideTimer)
            }
        }
    },
    beforeDestroy () {
        this.slideTimer && clearTimeout(this.slideTimer)
        this.timingTimer && clearInterval(this.timingTimer)
        this.delayTimer && clearInterval(this.delayTimer)
    }
}
</script>
<style lang="less" scoped>
.code-ipt {
    width: 180px;
    margin-right: 20px;
}
.code-btn {
    width: 135px;
}
.send-tip {
    color: #ff9900;
}
</style>
